<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="积分信息" width="70%">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;">用户标识：</span>{{ userCenterId }} &nbsp;&nbsp;
        <span style="font-weight: bold;">用户总积分：</span>{{ creditTotal }}&nbsp;&nbsp;
        <span style="font-weight: bold;">成长值：</span>{{ growthValue }}&nbsp;&nbsp;
        <span style="font-weight: bold;">会员等级：</span>{{ level }}
      </div>
      <div class="app-head" style="margin-bottom:10px;">
        <el-form label-position="left">
          <el-row type="flex" justify="start">
            <el-col :span="12">
              <el-form-item label="行为名称" label-width="100px">
                <el-input
                  ref="vipHeight"
                  v-model="actionName"
                  style="width:70%"
                  palceholder="行为名称"
                  size="mini"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行为标识" label-width="100px">
                <el-input
                  v-model="actionIden"
                  style="width:70%"
                  palceholder="行为标识 "
                  size="mini"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1" style="line-height:43px;">
              <el-button
                type="primary"
                size="mini"
                round
                icon="el-icon-search"
                @click="search"
              >查询</el-button>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start">
            <el-col :span="18">
              <el-form-item label="收录时间" label-width="100px">
                <el-date-picker
                  v-model="startDate"
                  :picker-options="pickerOptions1"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择开始时间"
                  @change="checkStartTime"
                />
                <span ref="to">至</span>
                <el-date-picker
                  v-model="endDate"
                  :picker-options="pickerOptions2"
                  :editable="false"
                  type="datetime"
                  size="mini"
                  style="width:30%"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss   "
                  placeholder="选择结束时间"
                  @change="checkTime"
                />
              </el-form-item>
            </el-col>
           <el-col :span="2">
              <!-- <el-form-item label="所属业务平台" label-width="100px">
                <el-select
                  v-model="platformId"
                  style="width:70%"
                  size="mini"
                  placeholder="请选择"
                >
                  <el-option value="" label="全部" />
                  <el-option
                    v-for="item of getPlatFormTerm"
                    :key="item.typeId"
                    :value="item.typeId"
                    :label="item.typeName"
                  />
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :span="1" class="absolute1" style="line-height:43px;">
              <el-button
                size="mini"
                round
                icon="el-icon-refresh"
                @click="reset"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="list"
        border
        style="width:100%"
      >
        <el-table-column label="收录时间">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.collectionTime"
              :content="scope.row.collectionTime"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.collectionTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="行为名称">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.behaviorName"
              :content="scope.row.behaviorName"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.behaviorName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="行为标识">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.behaviorIdentity"
              :content="scope.row.behaviorIdentity"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.behaviorIdentity }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="平台账号">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.userId"
              :content="scope.row.userId"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.userId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="所属平台">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.platformName"
              :content="scope.row.platformName"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.platformName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="积分变动">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.creditChange"
              :content="scope.row.creditChange"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.creditChange }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="变动后积分">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.creditAfter"
              :content="scope.row.creditAfter"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.creditAfter }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="成长值变动">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.growthChange"
              :content="scope.row.growthChange"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.growthChange }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="变动后成长值">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.growthValueAfter"
              :content="scope.row.growthValueAfter"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.growthValueAfter }}</span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="pageid"
          :page-sizes="[10,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </el-dialog>
</template>
<script>
import secret from '@/utils/secret'
import { mapGetters } from 'vuex'
import { point, allPoint } from '@/api/search'
export default {
  name: 'UserPoint',
  props: {
    pointDialog: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: null
    },
    platformTerm: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      userCenterId: '',
      creditTotal: '',
      growthValue: '',
      level: '',
      tiemLen: '',
      allPoint: null, // 全部积分信息
      showPointDialog: false,
      date: null, // 时间
      resultDate: null, // 更正时间格式
      list: null, // 列表
      endDate: '', // 结束时间
      startDate: '', // 开始日期
      actionName: '', // 行为名称
      actionIden: '',
      getPlatFormTerm: null,
      platformId: '',
      pageid: 0, // 当前页数
      pagecount: 10, // 每页显示条数
      count: 0, // 总数量
      pages: null, // 总页数
      param: Object, // 搜索条件
      infoss: null, // 接收参数
      flag: true,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounetd() {

  },
  computed: {
    ...mapGetters(['assignment', 'token'])
  },
  watch: {
    // 查询条件
    info(newVal) {
      this.infoss = newVal
    },
    // 遮罩
    pointDialog(newVal) {
      this.showPointDialog = newVal
      if (newVal) {
        this.$nextTick(() => {
          var to = this.$refs.to.offsetWidth
          var len = this.$refs.vipHeight.$el.offsetWidth / 2 - to + 5
          this.tiemLen = {
            'width': len + 'px'
          }
        })
        this.getPoint(this.infoss.userCenterId)
        this.getAllPoint(this.infoss.userCenterId)
      }
      this.getPlatFormTerm = this.platformTerm
    }
  },
  methods: {
    // 当前页面改变时
    handleSizeChange(num) {
      this.flag = false
      this.pagecount = num
      // if (!this.resultDate) {
      //   this.resultDate = []
      //   this.resultDate[0] = null
      //   this.resultDate[1] = null
      // }
      if (this.startDate === null) {
        this.startDate = ''
      }
      if (this.endDate === null) {
        this.endDate = ''
      }
      /* var plat = ''
      if (this.param.userCenterId === undefined) {
        if (this.info.users.length > 1) {
          plat = ''
        } else {
          plat = this.info.users[0].platformId
        }
        this.param.userCenterId = this.infoss.userCenterId
        this.param.behaviorIdentity = ''
        this.param.behaviorName = ''
        this.param.starttime = ''
        this.param.endtime = ''
        this.param.pagecount = 10
      } else {
        plat = this.param.platformId
      } */
      const data = {
        // token: this.token,
        platformId: this.infoss.platformId,
        userCenterId: this.infoss.userCenterId,
        behaviorName: this.actionName,
        behaviorIdentity: this.actionIden,
        starttime: this.startDate,
        endtime: this.endDate,
        pageid: 1,
        pagecount: parseInt(num)
      }
      console.log('请求参数')
      console.log(data)
      point(secret.Encrypt(data)).then(response => {
        this.flag = true
        this.pageid = 1
        this.pageid = 1
        console.log('返回数据')
        console.log(response)
        this.list = response.data.list // 列表项
        if (response.data.list === null) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count)
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      if (this.startDate === null) {
        this.startDate = ''
      }
      if (this.endDate === null) {
        this.endDate = ''
      }
      /* var plat = ''
      if (this.param.userCenterId === undefined) {
        console.log(this.info.users)
        if (this.info.users.length > 1) {
          plat = ''
        } else {
          plat = this.info.users[0].platformId
        }
        this.param.userCenterId = this.infoss.userCenterId
        this.param.behaviorIdentity = ''
        this.param.behaviorName = ''
        this.param.starttime = ''
        this.param.endtime = ''
        this.param.pagecount = 10
        this.param.platformId = plat
      } else {
        plat = this.param.platformId
      }
      console.log(plat) */
      const data = {
        // token: this.token,
        platformId: this.infoss.platformId,
        userCenterId: this.infoss.userCenterId,
        behaviorName: this.actionName,
        behaviorIdentity: this.actionIden,
        starttime: this.startDate,
        endtime: this.endDate,
        pageid: num + '',
        pagecount: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      // if (this.flag === true) {
      point(secret.Encrypt(data)).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        this.pageid = num // 当前页数
        console.log('返回数据')
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
      // }
    },
    // 父子组件传值
    check() {
      this.showPointDialog = false
      this.$emit('closePointss')
      this.pageid = 1
      this.pagecount = 10
      this.actionName = ''
      this.actionIden = ''
      this.startDate = ''
      this.endDate = ''
      this.platformId = ''
    },
    // 校验结束时间
    checkTime(time) {
      var selectTime
      const newStr = new RegExp('-', 'g')
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(newStr, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(newStr, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime(time) {
      // 比较是否大于现在的时间
      const newStr = new RegExp('-', 'g')
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(newStr, '/'))
          } else {
            end = ''
          }
          var first = new Date(time.replace(newStr, '/'))
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },
    // 请求列表
    getPoint(id) {
      /* if (this.info.users.length > 1) {
        platformId = ''
      } else {
        platformId = this.info.users[0].platformId
      } */
      const param = {
        // token: this.token,
        platformId: this.infoss.platformId,
        userCenterId: id,
        pageid: '1',
        pagecount: '10',
        behaviorName: this.actionName,
        behaviorIdentity: this.actionIden,
        starttime: this.startDate,
        endtime: this.endDate
      }
      console.log('请求参数')
      console.log(param)
      point(secret.Encrypt(param)).then(response => {
        var data = response.data
        console.log('返回数据')
        console.log(data)
        this.list = data.list
        if (response.data.list === null) {
          this.count = 0
          this.pageid = 0
        } else {
          this.count = parseInt(response.data.count)
        }
      })
    },
    // 总积分查询
    getAllPoint(userCenterId) {
      const data = {
        // token: this.token,
        userCenterId: userCenterId
      }
      console.log(data)
      allPoint(secret.Encrypt(data)).then(response => {
        this.creditTotal = response.data.creditTotal // 用户总积分
        this.growthValue = response.data.growthValue // 用户成长值
        this.level = response.data.level // 会员等级
        this.userCenterId = response.data.userCenterId // 用户身份标识
        this.allPoint = '用户标识：' + this.userCenterId + '  用户总积分：' + this.creditTotal + '  成长值：' + this.growthValue + '  会员等级：' + this.level
      })
    },
    // 搜索
    search() {
      this.getAllPoint(this.infoss.userCenterId)
      if (this.startDate === null) {
        this.startDate = ''
      }
      if (this.endDate === null) {
        this.endDate = ''
      }
      const param = {
        // token: this.token,
        platformId: this.platformId,
        userCenterId: this.info.userCenterId,
        behaviorName: this.actionName,
        behaviorIdentity: this.actionIden,
        starttime: this.startDate,
        endtime: this.endDate,
        pageid: 1,
        pagecount: this.pagecount
      }
      this.param = param
      console.log('请求参数')
      console.log(param)
      point(secret.Encrypt(param)).then(response => {
        var data = response.data
        this.list = data.list
        console.log('返回数据')
        console.log(response)
        if (response.data.list === null) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count)
        }
        this.pageid = 1
      })
    },
    // 重置
    reset() {
      this.actionName = ''
      this.actionIden = ''
      this.startDate = ''
      this.endDate = ''
      // this.platformId = ''
    }
  }
}
</script>
<style scoped>
.timeLength1 {
  width: 180px;
}

</style>
<style lang="scss">
.el-dialog__header{
  padding: 10px !important;
}
.el-dialog__body{
  padding: 12px 18px 30px 18px;
}
</style>
